<template>
  <div>
    <div v-for="(item, index) in list.data" :key="index">
      <router-link tag="div" :to="{ path: '/bbs/view', query: { id: item.id}}" class="list">
        <div class="title">{{ item.title }}</div>
        <div class="text-image flex-box">
          <div class="flex context">{{ item.mini_context }}</div>
          <img
            class="image"
            v-if="item.img_list.length > 0"
            :src="item.img_list[0].path"
            alt="加载中..."
          >
        </div>
        <div class="user flex-box">
          <div class="flex">{{ item.author.nickname }} · {{ item.reply_count }} 评论</div>
          <div class="more">···</div>
        </div>
      </router-link>
      <line-hr/>
    </div>
  </div>
</template>

<script>
export default {
  name: "BbsList",
  props: {
    show: {
      default: true
    },
    type: {
      default: ""
    },
    id: {
      default: ""
    }
  },
  data() {
    return {
      list: {
        current_page: 0,
        last_page: 0,
        per_page: 0,
        total: 0,
        data: []
      }
    };
  },
  methods: {
    init() {
      this.list = {
        current_page: 0,
        last_page: 0,
        per_page: 0,
        total: 0,
        data: []
      };
    },
    setList(value) {
      if (value && value.current_page <= 1 && value.data.length > 0) {
          this.list = value;
        console.log(1111);
        return;
      }
      this.list.current_page = value.current_page;
      this.list.last_page = value.last_page;
      this.list.per_page = value.per_page;
      this.list.total = value.total;
      for (let i = 0; i < value.data.length; i++) {
        this.list.data.push(value.data[i]);
      }
    },
    refresh() {
      let query = this.getQuery(1);
      return this.loadData(query);
    },
    loadMore() {
      let query = this.getQuery(Number(this.list.current_page) + 1);
      return this.loadData(query);
    },
    loadData(query) {
      return new Promise((resolve, reject) => {
        this.$axios.get("/api/index/bbs/list", { params: query }).then(res => {
          // this.list = res.data;
          // this.setList(res.data);
          // resolve();
          this.setList(res.data);
          if (res.data.current_page < res.data.last_page) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    getQuery(page = 1) {
      let query = { page };
      if (this.type !== "") {
        query.type = this.type;
      }
      if (this.id !== "") {
        query.id = this.id;
      }
      return query;
    }
  },
  computed: {},
  // created() {
  //   console.log("created");
  //   this.refresh();
  // },
};
</script>
<style scoped lang="less">
.list {
  padding: 0.75rem;
}
.title {
  font-size: 0.8rem;
  font-weight: 700;
}
.text-image {
  margin-top: 0.4rem;
}
.context {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  white-space: normal;
  color: #666666;
  line-height: 1.1rem;
}
.user {
  margin-top: 0.4rem;
  color: #888;
  line-height: 1rem;
  // background: rgba(0, 0, 0, .5);
}
.more {
  padding: 0 0.2rem;
  font-weight: 700;
  font-size: 1rem;
}
.image {
  margin-left: 0.1rem;
  width: 5rem;
  height: 3.3rem;
  border-radius: 0.2rem;
}
</style>
